<template>
    <div class="countdiv">
        <h2>目前的数值为:{{ sum }}</h2>
        <h2>使用Vuex中的getters:{{ bigSum }}</h2>
        <h2 style="color: rebeccapurple;">列表中共{{ personList.length }}人 </h2>
        <select v-model.number="selectN">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="Increment(selectN)">+</button>
        <button @click="Decrement(selectN)">-</button>
        <button @click="incrementOdd(selectN)">当前求和为奇数再加</button>
        <button @click="incrementWait(selectN)">等一等再加</button>
    </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    name: 'Count',
    data() {
        return {
            selectN: 1,
        }
    },
    methods: {
        // ...mapActions({ incrementOdd: 'incrementOdd', incrementWait: 'incrementWait' }),
        // ...mapMutations({ Increment: 'Increment', Decrement: 'Decrement' }),
        ...mapActions(['incrementOdd', 'incrementWait']),
        ...mapMutations(['Increment', 'Decrement']),

        Increment1() {
            //使用commit的方式直接调用mutations定义的方法，注意mutations定义的方法首字母大写，主要用来区分actio的方法的
            //this.$store.commit('Increment', this.selectN)
            //this.Increment(this.selectN)
        },
        Decrement1() {
            //this.$store.commit('Decrement', this.selectN)
            //this.Decrement(this.selectN)
        },
        incrementOdd1() {
            //使用dispatch调用 actions中定义的方法
            //this.$store.dispatch('incrementOdd', this.selectN)
            //this.incrementOdd(this.selectN)
        },
        incrementWait1() {
            //this.$store.dispatch('incrementWait', this.selectN)
            //this.incrementWait(this.selectN)
        }

    },

    computed: {
        // ...mapState({ sum: 'sum' }),
        // ...mapGetters({ bigSum: 'bigSum' }),
        ...mapState(['sum', 'personList']),
        ...mapGetters(['bigSum']),

    },
    watch: {

    }
}
</script>
